<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        onload = () => {
            let button = document.querySelectorAll("button")[0];
            let i = 5;//倒计时
            let arr = [0, 0, 0, 0];//验证码
            //随机产生一个数的方法
            function getRandom(s, e) {
                let max = Math.max(s, e);
                let min = Math.min(s, e);
                return Math.floor(Math.random() * (max - min + 1)) + min;
            }
            //点击开始
            button.onclick = () => {
                button.disabled = true;
                let p = document.getElementsByTagName("p")[0];
                let span = document.getElementsByTagName("span")[0];
                //随机产生5个数
                for (j = 0; j < arr.length; j++) {
                    arr[j] = getRandom(0, 9);
                }
                //输出验证码
                span.innerHTML = arr;
                //开始倒计时
                let num = setInterval(() => {
                    p.innerHTML = i + "秒之后更换验证码";
                    i--;
                    if (i === 0) {//倒计时结束，复位
                        clearInterval(num);
                        button.disabled = false;
                        p.innerHTML = "获取验证码";
                        i = 5;
                    }
                }, 1000);
            }
        };
    </script>
</head>
<body>
<button>点击</button>
<span></span>
<P></P>
</body>
</html>